<template >
<div :style="{fontSize:`${store.state.fontSize}em`}"  class=" w-screen h-screen app">
<NConfigProvider :locale="zhCN" :date-locale="dateZhCN" :theme="theme.data[theme.select].mode" :class="theme.data[theme.select].class" :theme-overrides="theme.data[theme.select].overrides">
<NDialogProvider>
<NMessageProvider>
<NRow class=" flex self-center h-8" >
<NCol :span="store.state.layout.menu.span" class="flex self-center float-left left-0">
<NMenu @update-value="routeChange" mode="horizontal" :options="menu.options"  :default-value="'/home'"/>
</NCol>
<NCol :span="store.state.layout.config.span" class="flex self-center gap-x-10 float-right right-0">
  <NButton  text @click="themeChange">{{ theme.data[theme.select].text }}</NButton>
  <NButton text @click="show.setting=true">
    <NIcon  :size="20"><div v-html="SettingIcon"></div></NIcon> 
  </NButton>
</NCol>
</NRow>
<NRow>
<RouterView></RouterView>
</NRow>
<NModal class=" w-2/3" v-model:show="show.setting" >
<Setting></Setting>
</NModal>
</NMessageProvider>
</NDialogProvider>
</NConfigProvider>
</div>
</template>

<script setup lang="ts">

import { 
  NRow, NCol, NMenu, NConfigProvider, zhCN, dateZhCN, darkTheme, 
  lightTheme, NButton, NIcon, NMessageProvider, NDialogProvider,
  NModal
} from 'naive-ui'
import { reactive, onMounted, watch } from 'vue';
import { BuiltInGlobalTheme } from 'naive-ui/es/themes/interface';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import Setting from "./view/Setting/index.vue"
import SettingIcon from "./assets/icons/setting.svg" 

const store = useStore()
const router = useRouter()


interface Theme{
  text:string,
  name:string,
  mode:BuiltInGlobalTheme,
  class:string,
  overrides:any
}
let menu = reactive(
  {
    options:[
    {label:'主页',key:'/home'},
    {label:'其他版本',children:[
      {
        label:"暗黑版",key:"https://www.13042332817.top/chat-student"
      },
      {
        label:"青春版",key:"https://www.13042332817.top/chat-another"
      },
      {
        label:"成年友好版",key:"https://www.13042332817.top/chat-main"
      }
    ]},
  ]
}
)
let theme = reactive(
  {
    data: [
    {
    text: "深色",
    name:"dark",
    mode: darkTheme,
    class:" bg-black h-screen w-full ",
    overrides:{
      common:{
        fontSize: `${store.state.fontSize}em`
      },
      Button:{
        fontSize: `${store.state.fontSize}em`
      },
    }
    },
    {
    text: "浅色",
    mode: lightTheme,
    name:"light",
    class: " bg-gray-100 h-full w-full",
    overrides:{
      common:{
      fontSize: `${store.state.fontSize}em`,
      },
      Button:{
        fontSize: `${store.state.fontSize}em`
      },
    }
    }] as Theme[],
    select:0
  }
)

let stateString = localStorage.getItem('globalVariable')
if(stateString!=null){ store.commit('update',JSON.parse(stateString));if(store.state.theme=='light'){theme.select=1}else{theme.select=0} }

if(window.innerWidth<720){
  store.commit('toMobileLayout')
}
else{
  store.commit('toDesktopLayout')
}

let show = reactive({
  setting:false as boolean
})
function themeChange(){
  theme.select=Number(!theme.select);
  store.commit('update',{'theme':theme.data[theme.select].name})
}
function routeChange(v: string){
  if(v.includes('http'))
  {
    window.location.href = v
  }
}

onMounted(()=>{
    router.push("/home")
    if(window.innerWidth<720){ store.commit('toMobileLayout')}
    else{ store.commit('toDesktopLayout') }
  })
watch(()=>store.state,()=>{
  localStorage.setItem('globalVariable',JSON.stringify(store.state))
},{deep:true,immediate:true})
</script>
